<template>
    <div>
      <ex-dialog
        width="1200px"
        class="ex-diolog"
        :title="title"
        :visible="visible"
        :close-on-click-modal="false"
        @closeDialog="handleClose"
      >
        <div class="main" v-loading="loading">
          <div class="title">申请信息</div>
          <div class="textList">
            <div class="list">申请ID：{{info.applyId}}</div>
            <div class="list">关联订单：{{info.orderNo}}</div>
            <div class="list">状态：{{info.statusDict}}</div>
          </div>
          <div class="textList">
            <div class="list">赚卡名称：{{info.cardName}}</div>
            <div class="list">订单金额：{{info.orderMoney}}元</div>
            <div class="list" v-if="info.integralAmount ">订单积分抵扣：使用椰分抵扣{{info.integralAmount}}元</div>
            <div class="list" v-if="!info.integralAmount ">订单积分抵扣：否</div>

          </div>
          <div class="textList">
            <div class="list">退款类型：{{info.refundTypeDict}}</div>
            <div class="list">申请金额：{{info.refundMoney}}元</div>
            <div class="list">购买用户联系方式：{{info.phone}}</div>
          </div>
          <div class="title">退款信息</div>
          <div class="textList">
            <div class="list">退款金额：{{info.refundMoney}}元</div>
            <div class="list">退款渠道：付款账号原路返回</div>
            <div class="list">备注：{{info.notes}}</div>
          </div>
          <div class="title">历史进度</div>
          <div class="textList">
            <div class="list">申请时间：{{info.applyTime ? info.applyTime : '-'}}</div>
            <div class="list">审核时间：{{info.auditTime ? info.auditTime : '-'}}</div>
            <div class="list">退款时间：{{info.refundTime ? info.refundTime : '-'}}</div>
          </div>
          <template v-if="info.status == 3">
            <div class="title">审核情况</div>
            <div class="textList">
              <div class="list" style="width: 100%;">驳回原因：{{info.rejectReason}}</div>
            </div>
          </template>
          
          <div class="button_box">
            <el-button
              :loading="AgreeLoading"
              @click="turnClick()"
              v-if="info.status == 1"
            >驳回</el-button>
            <el-button
              type="primary"
              :loading="AgreeLoading"
              @click="passClick()"
              v-if="info.status == 1"
            >同意退款</el-button>
            <el-button @click="handleClose">取消</el-button>
          </div>
        </div>
      </ex-dialog>
      <Dialog
        :row="info"
        v-bind="$attrs"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        @success="_handleSuccess"
      >
      </Dialog>
    </div>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  import Dialog from "@/views/syFundManagement/zhuanReturn/components/dialog";  

  // api
  import {
      refundAgree,
      refundRefuse,
      refundDetail,
    } from "@/api/syFundManagement/zhuanReturn";
import { string } from 'jszip/lib/support';
  export default {
    components: {
      Loading,
      Dialog,
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
     
      return {
        dialogVisible: false,
        labelWidth: "150px",
        inputWidth: "420px",
        title: "退卡申请",
        loading: false,
        disabled: false,
        AgreeLoading: false,
        ruleForm: {
          customerEquityCardId: '',//	用户卡id
          customerId: '',//	用户id
          orderId: '',//订单id
          rejectReason: '',//拒绝原因
        },
        info: {},
        rules: {
          rejectReason: [
            {required: true,message: "请输入拒绝原因",trigger: ["change"]}
          ],
          
          
        },
        
      };
    },
    computed: {},
    created() {
      this.getInfo()
    },
    mounted() {
      
    },
    computed: {},
    methods: {
      //获取详情
      getInfo() {
        var id = this.id;
        refundDetail(id).then((res) => {
          this.info = res.result
        }); 
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      //勾选活动奖励
      
      submitForm(formName) {
        console.log(this.twoForm);
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm
            }
            refundRefuse(data).then(res => {
                setTimeout(() => {
                  this.handleClose()
                  this.$message.success('驳回成功')
                  this.$emit('success')
                  this.AgreeLoading = false
                }, 1000);
              }).finally(()=>{
                this.AgreeLoading = false
              })
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      passClick(){
        var row = this.info
        var title = `确定要通过${row.applyId}的退款申请么？`
        this.$confirm(title, '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = {
            customerEquityCardId: row.customerEquityCardId,
            customerId: row.customerId,
            orderId: row.orderId
          }
          refundAgree(data).then((response) => {
            this.handleClose()
            this.$message.success('操作成功')
            this.$emit('success')
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      // 驳回
      turnClick(){
        this.dialogVisible = true
      },
      _handleSuccess(){
        this.handleClose()
        this.$emit('success')
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .title{
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
  padding-left: 10px;
  border-left: 4px solid #1890ff;
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
  span{
    padding-top: 8px;
  }
}
.textList{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 0;
  .list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 33.3%;
    font-size: 14px;
    color: #333;
    img{
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }
  }
}
  .button_box{
    display: flex;
    justify-content: center;
    margin-top: 64px;
    padding-bottom: 40px;
  }
  </style>
  